<template>
    <div>
        <div class="container">
            <div class="nav">
                <div>
                    <a href="javascript:;" @click="$router.back()"></a>

                </div>
                <div>
                    <span>找车</span>
                </div>
                <div @click="subnav = !subnav">
                    <i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>
                    <div class="subnav" v-show="subnav">
                        <router-link to="/" tag="a">首页</router-link>
                        <router-link to="/news" tag="a">资讯</router-link>
                        <router-link to="/video" tag="a">视频</router-link>
                        <router-link to="/seek" tag="a">找车</router-link>
                        <router-link to="/plaint" tag="a">汽车投诉</router-link>
                    </div>
                </div>
            </div>
            <div class="tabs">
                <router-link to="/seek" tag="div">
                    <span>按品牌找车</span>
                </router-link>
                
                <div>
                    <span>按条件找车</span>
                    <i></i>
                </div>
            </div>
            <div class="list">
                <div class="title">
                    <span>按价格</span>
                </div>
                <div class="major">
                    <ul>
                        <li>
                            <span>8万以内</span>
                        </li>
                        <li>
                            <span>8~12万</span>
                        </li>
                        <li>
                            <span>12~20万</span>
                        </li>
                        <li>
                            <span>20~30万</span>
                        </li>
                        <li>
                            <span>30万以上</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="list">
                <div class="title">
                    <span>按级别</span>
                </div>
                <div class="major">
                    <ul class="cartype">
                        <li>
                            <a href="javascript:;">
                                <i class="caricon"></i>
                                <span>微型车</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="caricon"></i>
                                <span>小型车</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="caricon"></i>
                                <span>紧凑车型</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="caricon"></i>
                                <span>中型车</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="caricon"></i>
                                <span>中大型车</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="caricon"></i>
                                <span>豪华车</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="caricon"></i>
                                <span>MPV</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="caricon"></i>
                                <span>SUV</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="caricon"></i>
                                <span>跑车</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="caricon"></i>
                                <span>电动车</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="list">
                <div class="title">
                    <span>按排量</span>
                </div>
                <div class="major">
                    <ul>
                        <li>
                            <span>1.3L以下</span>
                        </li>
                        <li>
                            <span>1.3L~1.6L</span>
                        </li>
                        <li>
                            <span>1.7L~2.0L</span>
                        </li>
                        <li>
                            <span>2.1L~3.0L</span>
                        </li>
                        <li>
                            <span>3.1L~5.0L</span>
                        </li>
                        <li>
                            <span>5.0L以上</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="car_wrapper">
                <div class="tit">
                    <span>热门车</span>
                </div>
                <div class="maj">
                    <ul>
                        <li>
                            <img src="../assets/img/U122.jpg" alt="">
                            <h4>宝马系5</h4>
                            <span>41.26-79.76万</span>
                        </li>
                        <li>
                            <img src="../assets/img/U122.jpg" alt="">
                            <h4>宝马系5</h4>
                            <span>41.26-79.76万</span>
                        </li>
                        <li>
                            <img src="../assets/img/U122.jpg" alt="">
                            <h4>宝马系5</h4>
                            <span>41.26-79.76万</span>
                        </li>
                        <li>
                            <img src="../assets/img/U122.jpg" alt="">
                            <h4>宝马系5</h4>
                            <span>41.26-79.76万</span>
                        </li>
                        <li>
                            <img src="../assets/img/U122.jpg" alt="">
                            <h4>宝马系5</h4>
                            <span>41.26-79.76万</span>
                        </li>
                        <li>
                            <img src="../assets/img/U122.jpg" alt="">
                            <h4>宝马系5</h4>
                            <span>41.26-79.76万</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="car_wrapper">
                <div class="tit">
                    <span>新车</span>
                </div>
                <div class="maj">
                    <ul>
                        <li>
                            <img src="../assets/img/U123.jpg" alt="">
                            <h4>宝马系5</h4>
                            <span>41.26-79.76万</span>
                        </li>
                        <li>
                            <img src="../assets/img/U123.jpg" alt="">
                            <h4>宝马系5</h4>
                            <span>41.26-79.76万</span>
                        </li>
                        <li>
                            <img src="../assets/img/U123.jpg" alt="">
                            <h4>宝马系5</h4>
                            <span>41.26-79.76万</span>
                        </li>
                        <li>
                            <img src="../assets/img/U123.jpg" alt="">
                            <h4>宝马系5</h4>
                            <span>41.26-79.76万</span>
                        </li>
                        
                      
                    </ul>
                </div>
            </div>
            
            <div class="search_foot">
                <div></div>
            </div>
        </div>
    </div>
</template>

<script>
import { getJsonSeek } from '../api/carseek';
export default {
    data() {
        return {
            dataInd: null,
            dataList: null,
            dataAll: null,
            typeInd: 0,
            subnav: false
        }
    },
    created() {
        this.$emit("car-show", true);
        this.getData()
    },
    methods: {
        getData() {
            getJsonSeek().then(data => {
                // console.log(data);
                this.dataAll = data.logo;
                console.log(this.dataAll);
            })
        }
    },
    watch: {
        typeInd() {
            // this.dataAll = this.dataAll.ag;
            // console.log(this.dataAll);
        }
    }
}
</script>

<style lang="scss" scoped>
.nav {
    height: 44px;
    background-color: #35447b;
    display: flex;
    align-items: center;

    &>div {
        &:nth-child(1) {
            text-align: left;
            flex: 1;
        }

        &:nth-child(2) {
            text-align: center;
            flex: 1;
        }

        &:nth-child(3) {
            text-align: right;
            flex: 1;
            padding-right: 10px;
            position: relative;
            i {
                display: block;
                float: right;

            }
                         .subnav {
                             width: 100px;
                             height: 170px;
                             padding: 6px;
                             border-radius: 4px;
                             position: absolute;
                             top: 35px;
                             left: 12px;
                             background: rgba(0, 0, 0, 0.8);
                             z-index: 9;
            
                             a {
                                 width: 100px;
                                 height: 18px;
                                 padding: 8px 0;
                                 text-align: center;
                                 background-image: none;
                                 color: #fff;
                             }
            
                             &::before {
                                 content: "";
                                 display: block;
                                 position: absolute;
                                 top: -17px;
                                 left: 80px;
                                 border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
                                 border-width: 9px;
                                 border-style: dashed dashed solid dashed;
                             }
                         }
        }
    }

    div {
        a {
            display: block;
            width: 40px;
            height: 40px;
            background-image: url("../assets/img/icons1.png");
            background-position: -82px -32px;
            background-size: 400px auto;
        }

        span {
            color: #fff;
            font-size: 18px;
        }

        i {
            width: 25px;
            height: 22px;
            background-image: url("../assets/img/icons1.png");
            background-position: -175px -42px;
            background-size: 400px auto;
        }
    }
}

.tabs {
    height: 44px;
    display: flex;
    background-color: #eee;
    align-items: center;

    div {
        flex: 1;
        text-align: center;
        position: relative;
    }

    &>div {
        span {
            font-size: 18px;
            color: #999;
            padding-bottom: 8px;
        }

        &:last-of-type {
            span {
                border-bottom: 2px solid #4c61b0;
                color: #4c61b0;
            }
        }

        i {
            width: 1px;
            height: 24px;
            background-color: #d9d9d9;
            display: block;
            position: absolute;
            top: 0px;
            right: 0px;
        }
    }
}
.list {
    padding: 0 10px;
    .title{
        height: 9px;
        border-bottom: 1px solid #e5e5e5;
        text-align: center;
        margin: 24px 0 12px 0;
        span{
            background-color: #fff;
            padding: 10px;
            color: #999;
            font-size: 14px;
        }
    }
    .major{
        ul{
            display: flex;
            flex-wrap: wrap;
            li{
                width: 33%;
                height: 38px;
                text-align: center;
                padding: 5px 0;
                span{
                    display: block;
                    background: #f8f8f8;
                    margin: 0 5px;
                    border: 1px solid #e5e5e5;
                    font-size: 12px;
                    color: #333;
                    height: 100%;
                    line-height: 38px;
                }
            }
        }
        .cartype{
            li{
                width: 25%;
                height: 50px;
                padding: 5px 0;
               a{
                display: block;
                margin: 0 5px;
                height: 48px;
                border: 1px solid #e5e5e5;
                    i {
                        display: block;
                        width: 60px;
                        height: 20px;
                        background: url('../assets/img/caricon.png') no-repeat;
                        background-size: 400px auto;
                        margin: 0 auto;
                        
                    }

                
                    span {
                        height: 20px;
                        border: 0px;
                        background-color: #fff;
                        line-height: 20px;
                    }
               }
            
                &:nth-child(1) i{
                    background-position: -11px -23px;
                }

                &:nth-child(2) i{
                    background-position: -111px -23px;
                }

                &:nth-child(3) i{
                    background-position: -208px -23px;
                }

                &:nth-child(4) i{
                    background-position: -306px -23px;
                }

                &:nth-child(5) i{
                    background-position: -11px -97px;
                }

                &:nth-child(6) i{
                    background-position: -110px -97px;
                }

                &:nth-child(7) i{
                    background-position: -209px -97px;
                }

                &:nth-child(8) i{
                    background-position: -209px -97px;
                }

                &:nth-child(9) i{
                    background-position: -11px -165px;
                }

                &:nth-child(10) i{
                    background-position: -108px -165px;
                }
             }
        }
    }
}

.car_wrapper{
    padding: 0 10px;
    .tit{
        height: 32px;
        border-bottom: 1px solid #e5e5e5;
        position: relative;
        line-height: 32px;
        margin: 10px 0 20px 0;
        span{
            color: #4c61b0;
            font-size: 18px;
            border-bottom: 1px solid #4c61b0;
            font-weight: 700;
            display: inline-block;
            
        }
    }
    .maj{
        ul{
            display: flex;
            flex-wrap: wrap;
            li{
                width: 50%;
                text-align: center;
                padding-bottom: 10px;
                img{
                    width: 170px;
                    height: 115px;
                    border: 1px solid #ccc;
                    margin: 0 auto;
                }
                h4{
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                    color: #333;
                    font-weight: bold;
                }
                span{
                    color: #ff0000;
                    font-size: 14px;
                }
            }
        }
    }
}
</style>